<template>
  <div
    class="gongrejindutiaodiv"
    :style="{
      width: getscalepxc(625),
      color: 'white',
      heigth: getscalepxc(12.5),
      '--epbo': getscalepxc(10),
      '--ebir': getscalepxc(7.5),
      '--epbi': getscalepxc(9.5),
    }"
  >
    <div
      :style="{
        width: '100%',
        position: 'relative',
        height: getscalepxc(12.5),
        color: '#77D2FF',
        fontSize: getscalepxc(8)
      }"
    >
      <div style="position: absolute; left: 0px">
        <el-button type="" round size="mini">11.1</el-button>
        启泵
      </div>
      <div :style="{position: 'absolute', left: getscalepxc(50)}">
        <el-button type="" round size="mini">11.7</el-button>
        预升温
      </div>
      <div :style="{position: 'absolute', left: getscalepxc(105)}">
        <el-button type="" round size="mini">11.15</el-button>
        正式供暖
      </div>
      <div :style="{position: 'absolute', right: getscalepxc(0)}">
        <el-button type="" round size="mini">3.15</el-button>
        结束供暖
      </div>
    </div>
    <gongrejindutiaobase :percentage="pernum" color="#e66830bb" :text-inside="true"></gongrejindutiaobase>
    <!-- <el-progress :percentage="pernum" color="#F68C7F66" :text-inside="true"></el-progress> -->
    <!-- <el-progress :percentage="50" color="#165286" status="warning"></el-progress> -->
  </div>
</template>
<script>

import dayjs from 'dayjs'
import commonmixins from "@/mixins/bigScreen/commonmixins"

export default {
  name: "gongrejindutiao",
  mixins: [commonmixins],
  components: {},
  data() {
    return {
      pernum: 50,
    };
  },
  computed: {},
  watch: {},
  mounted() {
    let total = dayjs('2021-03-15').diff(dayjs('2020-11-15'),'day')
    let now = dayjs().diff(dayjs('2020-11-15'),'day')
    this.pernum = Number(((now / total) * 100).toFixed(0)) 
  },
  methods: {},
};
</script>
<style lang='scss'>
.gongrejindutiaodiv { 
  // .el-button{
  // }
  .el-progress-bar__outer{
    background-color: #41b3e8bb;
    height: var(--epbo)!important;
  }
  .el-button.is-round {
    color: white;
    border: 1px solid #0c2d50;
    background-color: #0c2d50;
    color: #AED2E2;
    font-size: var(--ebir);
  }
  .el-progress-bar__innerText{
    color: white;
    font-size: var(--epbi)!important;
    // display: none;
  }
}
</style>